<template>
  <div class="company">
    <div class="companyTop" ref="companyTop">
      <split-pane :default-percent="50" :min-percent="30" split="vertical">
        <!-- 左侧 -->
        <template slot="paneL">
          <div class="companyTopLeft">
            <div class="feeListTitle">费目列表</div>
            <!-- 按钮组 -->
            <div class="feeListBtnBox">
              <el-button plain type="success" size="mini" @click="addFee">新增费目</el-button>
              <el-button plain type="primary" size="mini" @click="editFee">编辑费目</el-button>
              <el-button plain type="danger" size="mini" @click="delFee">删除费目</el-button>
            </div>
            <!-- 费目列表 -->
            <div class="feeListTable">
              <el-table :data="feeListTableData" border :height="feeListTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="getFeeCurrent">
                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                <el-table-column prop="chiCodeName" label="费目" width="120px" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="chiCnname" label="费目名称" width="120px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chiUnitName" label="计价单位" width="110px" show-overflow-tooltip  sortable ></el-table-column>
                <el-table-column prop="chiBpsignName" label="收支标志" width="110px" show-overflow-tooltip  sortable></el-table-column>
                <el-table-column prop="chiPayobjectName" label="支出对象" width="110px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chiOrfee" label="或有费用" width="110px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chiIsvalid" label="有效标志" align="center" width="110px" show-overflow-tooltip sortable >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.chiIsvalid" disabled></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
        <!-- 右侧 -->
        <template slot="paneR">
          <div class="companyTopRight">
            <div class="feeListTitle">费目细项列表</div>
            <!-- 查询 -->
            <div class="feeDetailBox">
              <el-form ref="feeDetailForm" :model="feeDetailForm" label-width="110px"  :inline="true" size="mini">
                <el-row>
                  <el-form-item label="费目细项名称：" prop="feeDetailName">
                    <el-input v-model="feeDetailForm.feeDetailName" clearable></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="searchBtn" plain>查询</el-button>
                  </el-form-item>
                </el-row>
              </el-form>
            </div>
            <!-- 按钮组 -->
            <div class="feeDetailBtnBox">
              <el-button size="mini" type="success" plain @click="feeDetailAdd">新增费目细项</el-button>
              <el-button size="mini" type="primary" plain @click="feeDetailEdit">编辑费目细项</el-button>
              <el-button size="mini" type="danger" plain @click="feeDetailDel">删除费目细项</el-button>
            </div>
            <!-- 费目细项列表  表格 -->
            <div class="feedetailTable">
              <el-table :data="feedetailTableData" border :height="feedetailTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="getFeeDetailCurrent">
                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                <el-table-column prop="chdCnname" label="费目细项名称" width="130px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chdEnname" label="英文名称" width="110px" show-overflow-tooltip  sortable ></el-table-column>
                <el-table-column prop="chdUnit" label="计价单位" width="110px" show-overflow-tooltip  sortable></el-table-column>
                <el-table-column prop="chdPrintname" label="打印名称" width="110px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chdOrder" label="排序号" width="110px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chdPermitfgName" label="是非标志" width="110px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chdLstupduser" label="最后修改员工" width="130px" show-overflow-tooltip sortable ></el-table-column>
                <el-table-column prop="chdLstupddt" label="最后修改时间" width="130px" show-overflow-tooltip sortable ></el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="block">
              <el-pagination
                ref="pagination"
                small
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Pagination.currentPage"
                :page-sizes="Pagination.pageSizeList"
                :page-size="Pagination.pageSize"
                :layout="Pagination.layout"
                :total="Pagination.total">
              </el-pagination>
            </div>
          </div>
        </template>
      </split-pane>
    </div>
    <div class="companyBot">
      <div class="feeListTitle" style="margin: 5px 0">费率列表</div>
      <!-- 费率按钮组 -->
      <div class="rateListBtnBox">
        <el-button plain type="success" size="mini" @click="addRate">新增费率</el-button>
        <el-button plain type="primary" size="mini" @click="editRate">编辑费率</el-button>
        <el-button plain type="danger" size="mini" @click="delRate">删除费率</el-button>
      </div>
      <!-- 费率列表 表格 -->
      <div class="rateListTableBox">
        <el-table :data="rateListTableData" border :height="rateListTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="getRateCurrent">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="chpPrice" label="单价" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="chpCurrency" label="币种" :formatter="moneyLimit" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="chpStdt" label="开始时间" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="chpEddt" label="结束时间" show-overflow-tooltip  sortable></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增费目弹窗 -->
    <el-dialog :title="addFeeTitle" :visible.sync="addFeeDialog" width="40%" :close-on-click-modal='false' @close="feeClose" v-el-drag-dialog>
      <div class="feeDialogBox">
        <el-form ref="feeDialogForm" :model="feeDialogForm" :rules="feeDialogRules" label-width="130px"  :inline="true" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="费目代码：" prop="feeCode">
                <el-select v-model="feeDialogForm.feeCode" filterable clearable>
                  <el-option
                    v-for="item in feeCodeList"
                    :key="item.rvLowValue"
                    :label="item.rvCmeaning"
                    :value="item.rvLowValue">
                    <span style="float: left;font-size: 12px;">{{ item.rvLowValue }}</span>
                    <span style="float: right; color: #8492a6;font-size: 12px;">{{ item.rvCmeaning }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计价单位：" prop="priceUnit">
                <el-select v-model="feeDialogForm.priceUnit" filterable clearable>
                  <el-option
                    v-for="item in priceUnitList"
                    :key="item.rvLowValue"
                    :label="item.rvCmeaning"
                    :value="item.rvLowValue">
                    <span style="float: left;">{{ item.rvLowValue }}</span>
                    <span style="float: right; color: #8492a6;">{{ item.rvCmeaning }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="费目中文名称：" prop="feeChName">
                <el-input v-model="feeDialogForm.feeChName" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文名称：" prop="feeEnName">
                <el-input v-model="feeDialogForm.feeEnName" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收支标志：" prop="feeStatus">
                <el-select v-model="feeDialogForm.feeStatus" filterable clearable>
                  <el-option
                    v-for="item in feeStatusList"
                    :key="item.rvLowValue"
                    :label="item.rvCmeaning"
                    :value="item.rvLowValue">
                    <span style="float: left;">{{ item.rvLowValue }}</span>
                    <span style="float: right; color: #8492a6;">{{ item.rvCmeaning }}</span>
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费目序号：" prop="feeOrder">
                <el-input-number v-model="feeDialogForm.feeOrder" controls-position="right" :min="1"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="支出对象：" prop="feeObj">
                <el-select v-model="feeDialogForm.feeObj" filterable clearable>
                  <el-option
                    v-for="item in feeObjList"
                    :key="item.rvLowValue"
                    :label="item.rvCmeaning"
                    :value="item.rvLowValue">
                    <span style="float: left;">{{ item.rvLowValue }}</span>
                    <span style="float: right; color: #8492a6;">{{ item.rvCmeaning }}</span>
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="或有费用标志：" prop="feeElse">
                <el-select v-model="feeDialogForm.feeElse" filterable clearable disabled>
                  <el-option
                    v-for="item in feeElseList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="有效标志：" prop="validStatus">
                <el-radio v-model="feeDialogForm.validStatus" label="Y">是</el-radio>
                <el-radio v-model="feeDialogForm.validStatus" label="N">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注：" prop="desc">
                <el-input v-model="feeDialogForm.desc" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFeeDialog = false">关闭</el-button>
        <el-button type="primary" @click="feeDialogSave">保存</el-button>
      </span>
    </el-dialog>
    <!-- 新增费目细项弹窗 -->
    <el-dialog :title="feeDetailTitle" :visible.sync="feeDetailDialog" width="50%" :close-on-click-modal='false' @close="feeDetailClose" v-el-drag-dialog>
      <div class="feeDialogBox">
        <el-form ref="deeDetailForm" :model="deeDetailForm" :rules="feeDetailRules" label-width="160px"  :inline="true" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="费目：" prop="fee">
                <el-select v-model="deeDetailForm.fee" filterable clearable disabled>
                  <el-option
                    v-for="item in feeCodeList"
                    :key="item.rvLowValue"
                    :label="item.rvCmeaning"
                    :value="item.rvLowValue">
                    <span style="float: left;font-size: 12px;">{{ item.rvLowValue }}</span>
                    <span style="float: right; color: #8492a6;font-size: 12px;">{{ item.rvCmeaning }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费目属性：" prop="feeAttr">
                <el-input v-model="deeDetailForm.feeAttr" clearable disabled></el-input>
              </el-form-item>
              <el-button type="primary" size="mini" plain @click="secondDiaBtn">选择</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文名称：" prop="chName">
                <el-input v-model="deeDetailForm.chName" clearable @change="makePrintName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文名称：" prop="enName">
                <el-input v-model="deeDetailForm.enName" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计价单位：" prop="priceUnit">
                <el-select v-model="deeDetailForm.priceUnit" filterable clearable>
                  <el-option
                    v-for="item in priceUnitList"
                    :key="item.rvLowValue"
                    :label="item.rvCmeaning"
                    :value="item.rvLowValue">
                    <span style="float: left;">{{ item.rvLowValue }}</span>
                    <span style="float: right; color: #8492a6;">{{ item.rvCmeaning }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="打印名称：" prop="printName">
                <el-input v-model="deeDetailForm.printName" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="费目排序号：" prop="feeOrderNum">
                <el-input-number v-model="deeDetailForm.feeOrderNum" controls-position="right" :min="1"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="允许修改单价的标志：" prop="updataPrice">
                <el-radio v-model="deeDetailForm.updataPrice" label="Y">是</el-radio>
                <el-radio v-model="deeDetailForm.updataPrice" label="N">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否为套用费率：" prop="isFeeUse">
                <el-radio v-model="deeDetailForm.isFeeUse" label="Y">是</el-radio>
                <el-radio v-model="deeDetailForm.isFeeUse" label="N">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="备注：" prop="desc">
                <el-input type="textarea" v-model="deeDetailForm.desc" clearable style="width: 550px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="feeDetailDialog = false">关闭</el-button>
        <el-button type="primary" @click="feeDetailDialogSave">保存</el-button>
      </span>
    </el-dialog>
    <!-- 新增费率弹窗 -->
    <el-dialog :title="rateDialogTitle" :visible.sync="rateDialog" width="50%" :close-on-click-modal='false' @close="rateClose" v-el-drag-dialog>
      <div class="rateDialogBox">
        <el-form ref="rateForm" :model="rateForm" :rules="rateRules" label-width="130px"  :inline="true" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="费目细项：" prop="feeDetail">
                <el-input v-model="rateForm.feeDetail" clearable disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="四舍五入标志：" prop="rounded">
                <el-radio v-model="rateForm.rounded" label="Y">是</el-radio>
                <el-radio v-model="rateForm.rounded" label="N">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="价格：" prop="ratePrice">
                <el-input v-model="rateForm.ratePrice" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="币种：" prop="rateMoneyCate">
                <el-select v-model="rateForm.rateMoneyCate" filterable clearable>
                  <el-option
                    v-for="item in moneyList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间：" prop="startTime">
                <el-date-picker v-model="rateForm.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间：" prop="endTime">
                <el-date-picker v-model="rateForm.endTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="有效标志：" prop="userful">
                <el-radio v-model="rateForm.userful" label="Y">是</el-radio>
                <el-radio v-model="rateForm.userful" label="N">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注：" prop="note">
                <el-input v-model="rateForm.note" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rateDialog = false">关闭</el-button>
        <el-button type="primary" @click="rateDialogSave">保存</el-button>
      </span>
    </el-dialog>
    <!-- 选择费目属性弹窗 -->
    <el-dialog title="选择费目属性" :visible.sync="selectFeeDialog" width="60%" :close-on-click-modal='false' @close="feeAttrClose" v-el-drag-dialog>
      <div class="selectFeeBox">
        <el-form ref="selectFeeForm" :model="selectFeeForm" :inline="true" size="mini">
          <el-form-item label="区域中心：" prop="areaCenter">
            <el-select v-model="selectFeeForm.areaCenter" filterable clearable>
              <el-option
                v-for="item in centerList"
                :key="item.dptId"
                :label="item.dptName"
                :value="item.dptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="费目属性描述：" prop="feeDescribe">
            <el-input v-model="selectFeeForm.feeDescribe" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button plain type="primary" @click="searchFeeAttr">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="feeListTitle">费目属性列表</div>
        <el-table :data="feeAttrTableData" border :height="feeAttrTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @cell-dblclick="takeData">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="cprDesc" label="费目属性描述" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="cprInsertuser" label="输入员工" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="cprInsertdt" label="输入时间" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="cprLstupduser" label="最后修改员工" show-overflow-tooltip  sortable></el-table-column>
          <el-table-column prop="cprLstupddt" label="最后修改时间" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="cprIsvalid" label="有效标志" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            @size-change="FeehandleSizeChange"
            @current-change="FeehandleCurrentChange"
            :current-page="feeCurrentPage"
            :page-sizes="[30, 60, 90, 120]"
            :page-size="feePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSelectDown,getFeeData,addFeeService,editFeeService,delFeeService,feeDetailSearchService,selectFeeAttrService,
  feeDetailEditService,feeDetailAddService,feeDetailDelService,centerSelect,rateSearchService,rateAddService,rateEditService,rateDelService } from '@/request/api'
import paginationMixin from '@/mixins/pagination'
// import resizeMixin from '@/mixins/resize'
export default {
  name: 'router.companyFee',
  mixins: [paginationMixin],
  data() {
    return {
      feeListTableData: [], // 费目列表 表格数据
      feeListTableHeight: 410, // 费目列表 表格高度
      feedetailTableData: [], // 费目细项列表 表格数据
      feedetailTableHeight: 410, // 费目细项列表 表格高度
      rateListTableData: [], // 费率列表 表格数据
      rateListTableHeight: 200, // 费率列表 表格高度
      feeDetailForm:{
        feeDetailName: '', // 费目细项名称
      },
      activeNames: ['1'], // 控制主页下方表格

      // 下拉框数据
      feeCodeList: [], // 费目代码
      priceUnitList: [], // 计价单位
      feeStatusList: [], // 收支标志
      feeObjList: [], // 支出对象
      feeElseList: [{label: '是',value: 'Y'},{label: '否',value: 'N'}], // 或有费用标志
      centerList: [], // 区域中心
      moneyList: [{label: '人民币',value: 'RMB'},{label: '美元',value: 'USD'}], // 币种

      feeCurrentData: '', // 费目  当前行数据
      feeDetailCurrentData: '', // 费目细项  当前行数据
      rateCurrentData: '', // 费率列表  当前行数据

      // 新增费目弹窗
      addFeeTitle: '', // 新增费目弹窗 标题
      addFeeDialog: false, // 新增费目弹窗 控制展示
      feeDialogForm: {
        feeCode:'', // 费目代码
        priceUnit:'', // 计价单位
        feeChName:'', // 费目中文名称
        feeEnName:'', // 英文名称
        feeStatus:'IF', // 收支标志
        feeOrder:'', // 费目序号
        feeObj:'MTE', // 支出对象
        feeElse:'否', // 或有费用标志
        validStatus:'Y', // 有效标志
        desc:'', // 备注
      },
      feeDialogRules: {
        feeCode: [
          { required: true, message: '费目代码不能为空', trigger: 'blur' },
        ],
        priceUnit: [
          { required: true, message: '计价单位不能为空', trigger: 'blur' },
        ],
        feeChName: [
          { required: true, message: '费目中文名称不能为空', trigger: 'blur' },
        ],
        feeStatus: [
          { required: true, message: '收支标志不能为空', trigger: 'blur' },
        ],
        feeObj: [
          { required: true, message: '支出对象不能为空', trigger: 'blur' },
        ],
        feeElse: [
          { required: true, message: '或有费用标志不能为空', trigger: 'blur' },
        ],
      },

      // 新增费目细项弹窗
      feeDetailTitle: '', // 新增费目弹窗 标题
      feeDetailDialog: false, // 新增费目弹窗 控制展示
      deeDetailForm: {
        fee:'', // 费目
        feeAttr:'', // 费目属性
        chName:'', // 中文名称
        enName:'', // 英文名称
        priceUnit:'1', // 计价单位
        printName:'', // 打印名称
        feeOrderNum:'', // 费目排序号
        updataPrice:'Y', // 允许修改单价的标志
        isFeeUse:'N', // 是否为套用费率
        desc:'', // 备注
      },
      feeDetailRules: {
        fee: [
          { required: true, message: '费目不能为空', trigger: 'blur' },
        ],
        priceUnit: [
          { required: true, message: '计价单位不能为空', trigger: 'blur' },
        ],
      },

      // 新增费率弹窗
      rateDialogTitle: '', // 新增费目弹窗 标题
      rateDialog: false, // 新增费目弹窗 控制展示
      rateForm: {
        feeDetail:'', // 费目细项
        rounded:'Y', // 四舍五入标志
        ratePrice:'', // 价格
        rateMoneyCate:'RMB', // 币种
        startTime:'', // 开始时间
        endTime:'', // 结束时间
        userful:'Y', // 有效标志
        note:'', // 备注
      },

      rateRules: {
        feeDetail: [
          { required: true, message: '费目细项不能为空', trigger: 'blur' },
        ],
        ratePrice: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
        ],
        rateMoneyCate: [
          { required: true, message: '币种不能为空', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '结束时间不能为空', trigger: 'blur' },
        ],
      },

      // 新增费目属性弹窗
      selectFeeDialog: false,
      selectFeeForm: {
        areaCenter: '', // 区域中心
        feeDescribe: '', // 费目属性描述
      },
      feeAttrTableData: [], // 费目属性列表 表格数据
      feeAttrTableHeight: 500, // 费目属性列表 表格高度
      selectCurrentData: '', // 费目属性列表  当前行数据
      cprId: '', // 费目属性ID

      // 分页数据
      totalNum: 0, // 共有多少数据
      feePageSize: 30, // 当前页有多少条数据
      feeCurrentPage: 1, // 当前页
    }
  },
  mounted() {
    this.getSelectData()
    this.getFeeListData()
  },
  methods: {
    // 后台返回  数据修改
    moneyLimit(row) {
      const statu = row.chpCurrency
      switch (statu) {
      case 'USD':
        return '美元'
      case 'RMB':
        return '人民币'
      }
    },
    // 新增费目
    addFee() {
      this.addFeeTitle = '新增费目'
      this.addFeeDialog = true
      console.log('add')
    },
    // 编辑费目
    editFee() {
      if(Object.keys(this.feeCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.addFeeTitle = '编辑费目'
      console.log(this.feeCurrentData)
      this.feeDialogForm.feeCode = this.feeCurrentData.chiCode
      this.feeDialogForm.priceUnit = this.feeCurrentData.chiUnit
      this.feeDialogForm.feeChName = this.feeCurrentData.chiCnname
      this.feeDialogForm.feeEnName = this.feeCurrentData.chiEnname
      this.feeDialogForm.feeStatus = this.feeCurrentData.chiBpsign
      this.feeDialogForm.feeOrder = this.feeCurrentData.chiSeqno
      this.feeDialogForm.feeObj = this.feeCurrentData.chiPayobject
      this.feeDialogForm.validStatus = this.feeCurrentData.chiIsvalid ? 'Y' : 'N'
      this.feeDialogForm.desc = this.feeCurrentData.chiRemark
      this.addFeeDialog = true
    },
    // 删除费目
    delFee() {
      if(Object.keys(this.feeCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFeeService({chiItemid: this.feeCurrentData.chiItemid}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.feedetailTableData = []
            this.rateListTableData = []
            this.getFeeListData()
          }
        })
      }).catch(() => {
      })
    },
    // 费目细项名称 查询
    searchBtn() {
      this.getFeeDetailListData()
    },
    // 新增费目细项
    feeDetailAdd() {
      if(Object.keys(this.feeCurrentData).length == 0) {
        this.$alert('请先选择费目','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.feeDetailTitle = '新增费目细项'
      console.log(this.feeCurrentData)
      this.deeDetailForm.fee = this.feeCurrentData.chiCodeName
      this.feeDetailDialog = true
    },
    // 输入中文名称显示打印名称
    makePrintName(val) {
      this.deeDetailForm.printName = val
    },
    // 编辑费目细项
    feeDetailEdit() {
      if(Object.keys(this.feeDetailCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.feeDetailTitle = '编辑费目细项'
      console.log(this.feeDetailCurrentData)
      this.deeDetailForm.fee = this.feeCurrentData.chiCodeName
      // this.deeDetailForm.feeAttr = this.feeCurrentData.chiCodeName
      this.deeDetailForm.chName = this.feeDetailCurrentData.chdCnname
      this.deeDetailForm.enName = this.feeDetailCurrentData.chdEnname
      this.deeDetailForm.priceUnit = this.feeDetailCurrentData.chdUnit
      this.deeDetailForm.printName = this.feeDetailCurrentData.chdPrintname
      this.deeDetailForm.updataPrice = this.feeDetailCurrentData.chdPermitfg
      this.deeDetailForm.isFeeUse = this.feeDetailCurrentData.chdApply
      this.deeDetailForm.feeAttr = this.feeDetailCurrentData.chdCprName
      this.deeDetailForm.desc = this.feeDetailCurrentData.chdRemark
      this.deeDetailForm.feeOrderNum = this.feeDetailCurrentData.chdOrder
      this.feeDetailDialog = true
    },
    // 删除费目细项
    feeDetailDel() {
      if(Object.keys(this.feeDetailCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        feeDetailDelService({chdId: this.feeDetailCurrentData.chdId}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.rateListTableData = []
            this.getFeeDetailListData()
          }
        })
      }).catch(() => {
      })
    },
    // 新增费率
    addRate() {
      if(Object.keys(this.feeDetailCurrentData).length == 0) {
        this.$alert('请选择一条费目细项','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.rateDialogTitle = '新增费率'
      this.rateForm.feeDetail = this.feeDetailCurrentData.chdCnname
      this.rateDialog = true
    },
    // 编辑费率
    editRate() {
      if(Object.keys(this.rateCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.rateDialogTitle = '编辑费率'
      console.log(this.rateCurrentData)
      this.rateForm.feeDetail = this.feeDetailCurrentData.chdCnname
      this.rateForm.ratePrice = this.rateCurrentData.chpPrice
      this.rateForm.startTime = this.rateCurrentData.chpStdt
      this.rateForm.endTime = this.rateCurrentData.chpEddt
      this.rateForm.note = this.rateCurrentData.chpRemark
      this.rateForm.rateMoneyCate = this.rateCurrentData.chpCurrency
      this.rateForm.rounded = this.rateCurrentData.chpRoundfg
      this.rateForm.userful = this.rateCurrentData.chpIsvalid
      this.rateDialog = true
    },
    // 删除费率
    delRate() {
      if(Object.keys(this.rateCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rateDelService({chpId: this.rateCurrentData.chpId}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getRateListData()
          }
        })
      }).catch(() => {
      })
    },
    // 新增费目细项弹窗  保存按钮
    feeDetailDialogSave() {
      if(this.feeDetailTitle == '新增费目细项') {
        let needArr = Object.assign(this.deeDetailForm, {chdCprId: this.cprId},{chdChiItemid: this.feeCurrentData.chiItemid})
        feeDetailAddService(needArr).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '新增成功'
            })
            this.feeDetailDialog = false
            this.getFeeDetailListData()
          }
        })
      }else if(this.feeDetailTitle == '编辑费目细项') {
        let needData = Object.assign(this.deeDetailForm, {chdId: this.feeDetailCurrentData.chdId,chdChiItemid: this.feeDetailCurrentData.chdChiItemid,chdCprId: this.cprId})
        feeDetailEditService(needData).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '编辑成功'
            })
            this.feeDetailDialog = false
            this.getFeeDetailListData()
          }
        })
      }
    },
    // 新增费目细项列表  选择按钮
    secondDiaBtn() {
      this.selectFeeDialog = true
      this.searchFeeAttr()
      this.getCenterData()
    },
    // 选择费目属性  区域中心  下拉框
    getCenterData() {
      centerSelect().then(res => {
        if(res.success == 1) {
          this.centerList = res.data.FTKJWLHYPT
        }
      })
    },
    // 选择费目属性 查询按钮
    searchFeeAttr() {
      selectFeeAttrService({PageIndexs: String(this.feeCurrentPage),PageSizes: String(this.feePageSize)}).then(res => {
        if(res.success == 1) {
          this.feeAttrTableData = res.data.FTKJWLHYPT
          this.totalNum = res.data.total.FTKJWLHYPT
        }
      })
    },
    // 选择费目属性 表格双击事件
    takeData(row) {
      this.cprId = row.cprId
      this.selectCurrentData = row
      this.selectFeeDialog = false
      let index = this.selectCurrentData.cprDesc.lastIndexOf('港')
      let str = this.selectCurrentData.cprDesc
      let newStr = this.insert_flg(str,'代理费',index+1)
      newStr = newStr.substring(0,newStr.length-3)
      this.deeDetailForm.feeAttr = this.selectCurrentData.cprDesc
      this.deeDetailForm.chName = newStr
      this.deeDetailForm.printName = newStr
    },
    insert_flg(str,flg,sn) {
      var newstr=''
      for(var i=0;i<str.length;i+=sn){
        var tmp=str.substring(i, i+sn)
        newstr+=tmp+flg
      }
      return newstr
    },

    // 监听费目弹窗关闭事件
    feeClose() {
      this.feeCurrentData = ''
      this.getFeeListData()
      this.$refs.feeDialogForm.resetFields()
    },
    // 监听费目细项弹窗关闭事件
    feeDetailClose() {
      this.feeDetailCurrentData = ''
      this.getFeeDetailListData()
      this.rateListTableData = []
      this.$refs.deeDetailForm.resetFields()
    },
    // 监听费率弹窗关闭事件
    rateClose() {
      this.$refs.rateForm.resetFields()
      this.rateCurrentData = ''
      this.getRateListData()

    },
    // 监听选择费目属性弹窗关闭事件
    feeAttrClose() {
      this.$refs.selectFeeForm.resetFields()
    },
    // 获取费目列表  当前行数据
    getFeeCurrent(row) {
      this.feeCurrentData = row
      this.getFeeDetailListData()
    },
    getFeeDetailListData() {
      let needData = Object.assign(this.feeDetailForm,{chiItemid: this.feeCurrentData.chiItemid},{PageIndexs: String(this.Pagination.currentPage)},{PageSizes: String(this.Pagination.pageSize)})
      feeDetailSearchService(needData).then(res => {
        if(res.success == 1) {
          this.feedetailTableData = res.data.FTKJWLHYPT
        }
      })
    },
    // 获取费目细项列表  当前行数据
    getFeeDetailCurrent(row) {
      console.log(row)
      this.feeDetailCurrentData = row
      this.getRateListData()
    },
    // 获取 费率列表 查询
    getRateListData() {
      rateSearchService({chpChdId: this.feeDetailCurrentData.chdId}).then(res => {
        if(res.success == 1) {
          this.rateListTableData = res.data.FTKJWLHYPT
        }
      })
    },
    // 获取费率列表  当前行数据
    getRateCurrent(row) {
      this.rateCurrentData = row
    },

    // 分页相关方法
    FeehandleSizeChange(val) {
      this.feePageSize = val
    },
    FeehandleCurrentChange(val) {
      this.feeCurrentPage = val
    },

    // 获取费目列表数据
    getFeeListData() {
      getFeeData().then(res => {
        if(res.success == 1) {
          this.feeListTableData = res.data.FTKJWLHYPT
          this.feeListTableData.forEach(item => {
            if(item.chiIsvalid == '是') {
              item.chiIsvalid = true
            }else if (item.chiIsvalid == '否'){
              item.chiIsvalid = false
            }
          })
        }
      })
    },
    // 费目 新增  保存
    feeDialogSave() {
      if(this.addFeeTitle == '新增费目') {
        addFeeService(this.feeDialogForm).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '新增成功'
            })
            this.addFeeDialog = false
            this.getFeeListData()
          }
        })
      }else if(this.addFeeTitle == '编辑费目') {
        let needArr = Object.assign(this.feeDialogForm,{chiItemid: this.feeCurrentData.chiItemid})
        editFeeService(needArr).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '编辑成功'
            })
            this.addFeeDialog = false
            this.getFeeListData()
          }
        })
      }
    },
    // 费率 新增 保存
    rateDialogSave() {
      if(this.rateDialogTitle == '新增费率'){
        let d = new Date().getTime()
        let f = new Date(this.rateForm.endTime).getTime()
        if(f < d) {
          this.$alert('结束时间不能小于当前日期','提示',{
            confirmButtonText: '确定'
          })
          return
        }
        let needArr = Object.assign(this.rateForm,{chpChdId: this.feeDetailCurrentData.chdId})
        rateAddService(needArr).then(res => {
          if(res.success == 1) {
            if(res.success == 1) {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.rateDialog = false
              this.getRateListData()
            }
          }
        })
      }else if(this.rateDialogTitle == '编辑费率') {
        let needData = Object.assign(this.rateForm,{chpChdId: this.feeDetailCurrentData.chdId},{chpId: this.rateCurrentData.chpId})
        rateEditService(needData).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '编辑成功'
            })
            this.rateDialog = false
            this.getRateListData()
          }
        })
      }
    },

    // 获取下拉框数据  下拉框接口
    getSelectData() {
      getSelectDown({rvDomain: '费目代码'}).then(res => {
        if(res.success == 1) {
          this.feeCodeList = res.data.FTKJWLHYPT
        }
      })
      getSelectDown({rvDomain: '收支费用标志'}).then(res => {
        if(res.success == 1) {
          this.feeStatusList = res.data.FTKJWLHYPT
        }
      })
      getSelectDown({rvDomain: '计价单位'}).then(res => {
        if(res.success == 1) {
          this.priceUnitList = res.data.FTKJWLHYPT
        }
      })
      getSelectDown({rvDomain: 'OFE'}).then(res => {
        if(res.success == 1) {
          this.feeObjList = res.data.FTKJWLHYPT
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.company {
  .companyTop {
    width: 100%;
    height: 570px;
    // border-bottom: 1px solid #000;
    .companyTopLeft {
      width: 100%;
      height: 100%;
      .feeListBtnBox {
        padding-left: 15px;
        margin: 31px 0;
      }
    }
    .companyTopRight {
      width: 100%;
      height: 100%;
      .feeDetailBox {
        padding-left: 15px;
        margin-top: 10px;
      }
      .feeDetailBtnBox {
        padding-left: 15px;
        margin-bottom: 10px;
      }
      .block {
        padding-top: 5px;
      }
    }
  }
  .companyBot {
    clear: both;
    .rateListBtnBox {
      padding-left: 10px;
      padding-bottom: 10px;
    }
  }
}
.feeListTitle {
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  margin-top: 10px;
}
::v-deep .el-input-number--mini {
  width: 193px;
}

</style>

